<form #searchbarForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSearch()" novalidate>
    <div class="row">
        <div class="col-md-6 col-xs-6">
            <op-input [labelTitle]="emailData.labelTitle" [placeholder]="emailData.placeholder" [ngForm]="searchbarForm" [reactiveFormControl]="emailData.reactiveFormControl"
                [type]="emailData.type" [maxLength]="emailData.maxLength">
            </op-input>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-input [labelTitle]="nameData.labelTitle" [placeholder]="nameData.placeholder" [ngForm]="searchbarForm" [reactiveFormControl]="nameData.reactiveFormControl"
                [maxLength]="nameData.maxLength">
            </op-input>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-input [labelTitle]="passwordData.labelTitle" [placeholder]="passwordData.placeholder"
                [ngForm]="searchbarForm" [reactiveFormControl]="passwordData.reactiveFormControl" [type]="passwordData.type" [maxLength]="passwordData.maxLength">
            </op-input>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-input [labelTitle]="confirmPasswordData.labelTitle" [placeholder]="confirmPasswordData.placeholder"
                [ngForm]="searchbarForm" [reactiveFormControl]="confirmPasswordData.reactiveFormControl" [type]="confirmPasswordData.type" [maxLength]="confirmPasswordData.maxLength">
            </op-input>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-input [labelTitle]="ageData.labelTitle" [placeholder]="ageData.placeholder" [ngForm]="searchbarForm" [reactiveFormControl]="ageData.reactiveFormControl"
                [type]="ageData.type">
            </op-input>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-select [isRequired]="statusData.isRequired" [labelTitle]="statusData.labelTitle" [reactiveFormControl]="statusData.reactiveFormControl"
                [allItems]="statusData.allItems">
            </op-select>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-date-picker [isTouchUI]="startDateData.isTouchUI" [labelTitle]="startDateData.labelTitle" [reactiveFormControl]="startDateData.reactiveFormControl"
                [maxDate]="maxDate">
            </op-date-picker>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-date-picker [isTouchUI]="endDateData.isTouchUI" [labelTitle]="endDateData.labelTitle" [reactiveFormControl]="endDateData.reactiveFormControl"
                [minDate]="minDate">
            </op-date-picker>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-checkbox [labelTitle]="marriedData.labelTitle" [reactiveFormControl]="marriedData.reactiveFormControl" [name]="marriedData.name">
            </op-checkbox>
        </div>
        <div class="col-md-6 col-xs-6">
            <op-radio [labelTitle]="favoriteSeasonData.labelTitle" [reactiveFormControl]="favoriteSeasonData.reactiveFormControl" [allItems]="favoriteSeasonData.allItems"></op-radio>
        </div>
        <div class="col-md-10 col-xs-10"></div>
        <div class="col-md-1 col-xs-1">
            <!--material style button demo: https://v5.material.angular.io/components/button/examples-->
            <button mat-raised-button type="submit">
                <i class="fa fa-search"></i> 搜索</button>
        </div>
        <div class="col-md-1 col-xs-1">
            <button mat-raised-button type="button" (click)="refresh()">
                <i class="fa fa-refresh"></i> 重置</button>
        </div>
    </div>
</form>